<template>
    <div class="wpwork-preview-main user-form">
      <el-row class="wpwork-common-search-box" :gutter="16" style="margin-bottom: 10px;">
        <el-form @submit.native.prevent>
         
          <el-col :span="4">
            <el-form-item label="名称：">
              <el-input v-model="listQuery.remark"  placeholder="备注"
                        clearable @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态：">
              <el-select v-model="listQuery.eventType" clearable placeholder="--请选择--">
                <el-option label="待进行" value="1"></el-option>
                <el-option label="进行中" value="2"></el-option>
                <el-option label="已结束" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="负责人：">
              <el-input v-model="listQuery.terminalNumber"   placeholder="请输入终端号码"
                        clearable @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="时段：">
              <el-date-picker
                v-model="listQuery.datepicker"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>  
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">
                {{$t('common.search')}}</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="wpwork-common-layout-main wpwork-flex-main" style="margin-top: -10px;">
        <wpwork-table v-loading="listLoading" :data="tableData">
          <el-table-column prop="taskName" label="名称"  align="center"/>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span style="color: green;">{{ scope.row.taskStatus }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="taskStatus" label="状态"  align="center" style="color: green;" /> -->
          <el-table-column prop="person" label="负责人"   align="center" />
          <el-table-column prop="startTime" label="开始时间" :formatter="wpwork.tableDateFormat"/>
          <el-table-column prop="endTime" label="结束时间" :formatter="wpwork.tableDateFormat"/>
          <el-table-column label="操作">
            <template slot-scope="scope" v-if="!scope.row.isAdministrator">
              <el-button size="mini" type="text"  @click="handleUpdateState(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </wpwork-table>
        <pagination :total="total" :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
      <info-dialog ref="infoDialog" @refresh="initData" />
    </div>
</template>

<script>
import InfoDialog from './InfoDialog.vue'
export default {
  name: 'task',
  components: {
    InfoDialog
  },
  data() {
    return {
      tableData: [],
      listLoading: true,
      listQuery: {
        organizeId: '',
        keyword: '',
        gender: '',
        enabledMark: '',
        currentPage: 1,
        pageSize: 20
      },
      defaultProps: {
        children: 'children',
        label: 'fullName'
      },
      total: 2
    }
  },
  watch: {
  },
  computed: {
   
  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    handleUpdateState(row){
      this.$refs.infoDialog.openDialog({
        imageUrls: row.imageUrls,
        endTime: row.endTime,
        startTime: row.startTime,
        taskName: row.taskName,
        taskStatus: row.taskStatus,
        person: row.person
      });
    },
    initData() {
      this.listLoading = true
      this.tableData = [
        {
          "id": "1",
          "taskName": "作业任务1",
          "person":"测试人员1",
          "startTime":1755500342000,
          "endTime":1755500382000,
          "taskStatus":"已结束",
          "imageUrls": [
            require('@/assets/images/t4.png')
          ]
        },
        {
          "id": "2",
          "taskName": "作业任务2",
          "person":"测试人员2",
          "startTime":1755572342000,
          "endTime":1755572482000,
          "taskStatus":"已结束",
          "imageUrls": [
            require('@/assets/images/t3.png')
          ]
        },
      ]
      setTimeout(() => {
          this.listLoading = false
       }, 600)
    },
    reset() {
      this.listQuery.startDate = ''
      this.listQuery.endDate = ''
      this.initData()
    },
  }
}
</script>
<style lang="scss" scoped>
.user-form{
  margin-top: 68px;
  height: 92%;
}
@media (max-width: 1268px) { 
  .user-form {
      margin-top: 98px;

  }
}
@media (max-width: 768px) { 
  .user-form {
      margin-top: 168px;

  }
}
>>> .icon-ym {
  font-size: 12px !important;
}
</style>